<template>
	<view class="main-container">
		<view class="head">
			<view class="homeHead">
					<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
					<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">欢迎使用智途安行~</view>
					<view class="content">
						<view class="time">
							<view class="left">
								<view>{{day}}</view>
							</view>
							<view class="right">
								<view class="year">
									<view>{{year}}年{{month}}月</view>
								</view>
								<view class="week">{{getCurrentDayOfWeek()}}</view>
							</view>
						</view>
						<view class="pic">
							<view class="city">{{city}} {{district}}</view>
							
							<view class="temp">{{temperature}}°c</view>
							<image :src="Weather_img" mode="heightFix"></image>
						</view>
					</view>
				</view>
		</view>
		
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay>
				<swiper-item v-for="(item,index) in 3" :key="index"><image mode="aspectFill" :src="img+index"></image></swiper-item>
			</swiper>
		</view>
		
		<view class="notice">
			<view class="left">
				<image src="../../static/notice.png" ></image>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item>小程序还在测试中...</swiper-item>
					<swiper-item>注册功能受限，验证码默认为123456</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<image src="../../static/arrow-right.png"></image>
			</view>
		</view>
		
		
		<!-- 在公告和今日赠言之间插入打卡模块 -->
		<view class="checkin-module">
		  <view class="checkin-header">
		    <image src="../../static/打卡.png" class="icon"></image>
		    <text class="title">出行打卡</text>
		    <text class="subtitle">已连续打卡{{ continuousDays }}天</text>
		  </view>
		  
		  <view class="checkin-body">
		    <view class="stats">
		      <view class="stat-item">
		        <text class="number">{{ totalCheckins }}</text>
		        <text class="label">累计打卡</text>
		      </view>
		      <view class="stat-item"  @tap="toggleCalendar">
		        <text class="number">{{ currentMonthCheckins }}</text>
		        <text class="label">本月打卡</text>
		      </view>
		    </view>
		    
		    <view 
		      class="checkin-btn" 
		      :class="{ checked: isChecked }"
		      @click="handleCheckin"
		    >
		      {{ isChecked ? '今日已打卡' : '立即打卡' }}
		    </view>
		  </view>
		  
		  <view class="inspiration-quote" v-if="isChecked">
		      <text class="quote-text">{{ selectedQuote }}</text>
		    </view>
		</view>

<!-- 新增心情指数模块 -->
  <view class="mood-indicator" @click="toggleMoodDetail">
    <view class="mood-header">
      <text class="emoji">{{ moodEmoji }}</text>
      <text class="title">今日驾驶情绪指数</text>
      <uni-icons 
        :type="showMoodDetail ? 'arrowup' : 'arrowdown'" 
        size="16" 
        color="#666"
      />
    </view>
    <progress 
      :percent="moodPercent" 
      :activeColor="moodColor" 
      backgroundColor="#FFF3E0"
      stroke-width="10"
    />
    <!-- 展开的详细信息 -->
    <view class="mood-detail" v-if="showMoodDetail">
      <view class="detail-item">
        <uni-icons type="sound" size="14" color="#666"/>
        <text>🎤语音分析：语速平稳度 {{ voiceStability }}%</text>
      </view>
      <view class="detail-item">
        <uni-icons type="heart" size="14" color="#FF5252"/>
        <text>❤️ 心率波动：平均 {{ avgHeartRate }}bpm</text>
      </view>
    </view>
  </view>
  
  
  
  <!-- 在travel-suggestion模块上方添加日历结构 -->
  <view class="calendar-modal" v-if="showCalendar" @tap="toggleCalendar">
    <view class="calendar-wrapper">
      <view class="calendar-header">
        <text class="month-title">{{year}}年{{month}}月</text>
      </view>
      <view class="calendar-grid">
        <!-- 星期行 -->
        <view class="weekdays">
          <view v-for="(w,index) in ['日','一','二','三','四','五','六']" 
                :key="index" class="weekday">{{w}}</view>
        </view>
        <!-- 日期格子 -->
        <view class="days-grid">
          <view v-for="(day,index) in calendarDays" 
                :key="index" 
                class="day-cell"
                :class="{
					active: day.isChecked,
					today: day.isToday
				}">
            <text class="day-number">{{day.date}}</text>
           <view v-if="day.isToday" class="today-marker"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  
  <!-- 在今日赠言和心情指数模块之间添加 -->
  <view class="travel-suggestion">
    <view class="suggestion-header">
      <uni-icons type="car" size="24" color="#2196F3"></uni-icons>
      <text class="title">今日出行建议</text>
      <text class="subtitle">根据当前天气和路况推荐</text>
    </view>
  
    <view class="suggestion-grid">
      <!-- 天气建议 -->
      <view class="suggestion-item weather">
        <view class="icon-box">
          <image :src="Weather_img" class="weather-icon"></image>
          <text class="temp">{{temperature}}°C</text>
        </view>
        <view class="advice">
          <view class="main-advice">{{weatherAdvice.main}}</view>
          <view class="detail">{{weatherAdvice.detail}}</view>
        </view>
      </view>
  
      <!-- 安全提示 -->
      <view class="suggestion-item safety">
        <uni-icons type="shield" size="32" color="#4CAF50"></uni-icons>
        <view class="content">
          <view class="tip-title">安全锦囊</view>
          <view class="tips">
            <text v-for="(tip,index) in safetyTips" :key="index">• {{tip}}</text>
          </view>
        </view>
      </view>
  
      <!-- 路况提示 -->
      <view class="suggestion-item traffic">
        <uni-icons type="alert" size="32" color="#FF9800"></uni-icons>
        <view class="content">
          <view class="traffic-title">路况提醒</view>
          <view class="road-condition">{{roadCondition}}</view>
        </view>
      </view>
    </view>
  </view>

		
		<view class="daily">
			<view class="title">今日赠言</view>
			<view class="body">
			 <view class="text">{{text}}</view>
			</view>
			
		</view>
	
	
		
	</view>

</template>

<script setup>
import {onShareAppMessage,onShareTimeline,onLoad} from "@dcloudio/uni-app"
import {getStatusBarHeight,getTitleBarHeight} from "@/utils/system.js"
import {getCurrentDayOfWeek} from "@/utils/tools.js"
import {ref,computed} from "vue"
import {getWeatherData,getLocationDetail,getEverydayDedication,postSign,getMonthSign,getMonthSum} from '@/api/apis.js'
const city=ref('株洲')                                //城市
const district=ref('醴陵市') 							  //区
const temperature=ref('26') 					 //温度
const Weather_img=ref('../../static/多云.png')   //天气图片
const img=ref('https://picsum.photos/600/400?') //轮播图图片
const text=ref('') 								//每日赠言
const continuousDays = ref(0);  				//持续打卡的天数
const totalCheckins = ref(0);  				//总计打卡数目
const currentMonthCheckins = ref(0);			//本月打卡次数
const isChecked = ref(false);               	//今日打卡标志  
const showCalendar = ref(false)					//显示日历标志
const checkinDates = ref([]) 			//本月打卡日
const moodPercent = ref(88) 					// 今日心情指数
const showMoodDetail = ref(false)               //心情详细信息
const voiceStability = ref(92) 					//语音平稳度
const avgHeartRate = ref(78)					//心率
const selectedQuote = ref("")                   //出行祝福语
const inspirationalQuotes = ref([               //出行祝福语列表
  "安全出行，幸福随行！",
  "道路千万条，安全第一条！",
  "平安每一步，幸福每一天！",
  "谨慎驾驶，平安相伴！",
  "行车多礼让，道路更通畅！"
])

const safetyTips = ref([						//出行建议
  '检查胎压是否正常',
  '确认应急工具齐全',
  '避免疲劳驾驶',
  '保持安全车距'
])
const roadCondition = ref('早高峰期间，中环路段车流量较大') //路况
//年月日 星期
const now = new Date(); 
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); 
const day = String(now.getDate()).padStart(2, '0');


//获取市和区
const getCity_District=(address)=>{
	// 1. 提取市名（不包含“市”字）
	const cityMatch = address.match(/省(.+?)市/);
	const cityTmp = cityMatch ? cityMatch[1] : null; // 湘潭
	
	// 2. 提取区/县/县级市名（包含后缀，如“区”）
	const districtMatch = address.match(/市(.+?)(区|县|市)/);
	const districtTmp = districtMatch ? districtMatch[1] + districtMatch[2] : null; // 岳阳区
	
	city.value=cityTmp 
	district.value=districtTmp 
}


//请求访问接口
const request=async ()=>{
	if(!uni.getStorageSync("latitude")||!uni.getStorageSync("longitude"))
	{ 
		return
	}
	const address={
		latitude:uni.getStorageSync("latitude"),
		longitude:uni.getStorageSync("longitude")
	}
	
	const res=await	getWeatherData(address)
	if(res.data.data){
		const {data:{data:{now}}}=res
		temperature.value=now.temperature
		Weather_img.value=now.weather_pic
	}
	const Address_res=await getLocationDetail(address)
	
	getCity_District(Address_res.data.data)
}


//获取经纬度
const getLocation=()=>{
	uni.getFuzzyLocation({
			    type: 'gcj02',
			    success: function (res) {
					
					uni.setStorageSync("latitude",res.latitude)
					uni.setStorageSync("longitude",res.longitude)
					request()
			    },
			    fail: function (err) {
			        uni.showToast({
			            title: '获取定位失败',
			            icon:'none'
			        });
					request()
			    }
			});
}

//获得赠言
const getDedication=async()=>{
	// 生成 1-10 之间的随机整数（包含1和10）
	const id = Math.floor(Math.random() * 10) + 1;
	const res=await getEverydayDedication(id)
	text.value=res.data.data.content || "很多人搞错了告白的含义，告是告诉，白是话，向对方告白是告诉对方一些话，而不是向对方索取关系，告白接的应该是句点，而不是问号，对方要是同样的喜欢你，自然会反过来告白，要是不喜欢你你也别难过，因为告白本身就是目的，而你完成了目的，所以你已经很棒了。"
}


//获得位置经纬度
const getWeather=()=>{
	if(!uni.getStorageSync("latitude")||!uni.getStorageSync("longitude")) 
	  getLocation()
	  
	//网络请求获取城市
	request()

}

//获取签到数据
const getSign=async ()=>{
	const id=uni.getStorageSync('id')
	const res= await getMonthSign(id)
	const res1=await getMonthSum()
	currentMonthCheckins.value=res1.data.data
	
	totalCheckins.value=continuousDays.value=res1.data.data
	

	checkinDates.value=res.data.data
	//判断今日是否打卡
	isChecked.value=checkinDates.value.includes(Number(day))
}



//初始化数据
onLoad(async()=>{
	//获取赠言
	getDedication()
	//获取天气
	getWeather()
	//获得签到数据
	getSign()
})
	
//分享给朋友
onShareAppMessage((e)=>{
	return {
		title:"智途安行",
		path:"/pages/index/index"
	}
})
//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"智途安行",
		imageUrl:"/static/logo.png"
	}
})


// 打卡处理
const handleCheckin =async () => {
  if (!isChecked.value) {
    isChecked.value = true;
    continuousDays.value += 1;
    totalCheckins.value += 1;
    currentMonthCheckins.value += 1;
    uni.showToast({ title: '打卡成功！+1积分', icon: 'success' });
	const randomIndex = Math.floor(Math.random() * inspirationalQuotes.value.length)
	selectedQuote.value = inspirationalQuotes.value[randomIndex]
	
	//网络请求
	const res=await postSign(uni.getStorageSync('id'))
	console.log(res)
	
  }
};


// 根据指数计算表情符号
const moodEmoji = computed(() => {
  if (moodPercent.value >= 85) return '😊'
  if (moodPercent.value >= 60) return '😐'
  return '😰'
})

// 根据指数计算颜色
const moodColor = computed(() => {
  if (moodPercent.value >= 85) return '#4CAF50'  // 绿色
  if (moodPercent.value >= 60) return '#FFB74D'  // 橙色
  return '#F44336' // 红色
})

// 展开/收起详细信息
const toggleMoodDetail = () => {
  showMoodDetail.value = !showMoodDetail.value
}





const weatherAdvice = computed(() => {
  const temp = parseInt(temperature.value)
  return {
    main: temp > 30 ? '高温预警' : temp < 5 ? '低温提示' : '适宜出行',
    detail: temp > 30 ? '请注意发动机冷却液温度' 
            : temp < 5 ? '小心路面结冰' 
            : '天气条件良好，注意保持车距'
  }
})




// 生成当月日历数据
const calendarDays = computed(() => {
  const days = []
  const date = new Date(year, month - 1, 1)
  
  // 计算当月第一天星期几
  const firstDay = date.getDay()
  // 填充空白
  for(let i = 0; i < firstDay; i++) {
    days.push({date: '', isChecked: false})
  }

  // 填充日期
  while(date.getMonth() === month - 1) {
    const currentDate = date.getDate()
    days.push({
      date: currentDate,
      isChecked: checkinDates.value.includes(currentDate),
      isToday: currentDate === parseInt(day),
    })
    date.setDate(date.getDate() + 1)
  }

  return days
})

// 切换日历显示
const toggleCalendar = () => {
  showCalendar.value = !showCalendar.value
}


</script>

<style lang="scss" scoped>
	.day-cell {
	  position: relative;
	  
	  &.today {
	    .day-number {
	      color: $brand-theme-color;
	      font-weight: bold;
	    }
	    
	    .today-marker {
	      position: absolute;
	      bottom: 10rpx;
	      left: 50%;
	      transform: translateX(-50%);
	      width: 36rpx;
	      height: 5rpx;
	      background: $brand-theme-color;
	      
	    }
	  }
	}
	// 新增样式
	.calendar-modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0,0,0,0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	  
	  .calendar-wrapper {
	    background: #fff;
	    width: 85%;
	    border-radius: 24rpx;
	    padding: 30rpx;
	    
	    .calendar-header {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      margin-bottom: 30rpx;
	      
	      .month-title {
	        font-size: 34rpx;
	        font-weight: bold;
	      }
	    }
	    
	    .calendar-grid {
	      .weekdays {
	        display: flex;
	        justify-content: space-around;
	        margin-bottom: 20rpx;
	        .weekday {
	          width: 14.28%;
	          text-align: center;
	          color: #666;
	          font-size: 28rpx;
	        }
	      }
	      
	      .days-grid {
	        display: flex;
	        flex-wrap: wrap;
	        
	        .day-cell {
	          width: 14.28%;
	          aspect-ratio: 1;
	          display: flex;
	          flex-direction: column;
	          align-items: center;
	          justify-content: center;
	          position: relative;
	          
	          .day-number {
	            font-size: 28rpx;
	            margin-bottom: 8rpx;
	          }
	          
	          &.active {
	            background: #E8F5E9;
	            border-radius: 12rpx;
	          }
	        }
	      }
	    }
	  }
	}
	.travel-suggestion {
	  background: #fff;
	  border-radius: 24rpx;
	  margin: 30rpx;
	  padding: 30rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	
	  .suggestion-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 30rpx;
	
	    .title {
	      font-size: 34rpx;
	      font-weight: bold;
	      margin: 0 15rpx 0 20rpx;
	      color: #333;
	    }
	
	    .subtitle {
	      font-size: 24rpx;
	      color: #666;
	      opacity: 0.8;
	    }
	  }
	
	  .suggestion-grid {
	    display: grid;
	    gap: 30rpx;
	
	    .suggestion-item {
	      padding: 25rpx;
	      border-radius: 16rpx;
	      display: flex;
	      align-items: center;
	
	      &.weather {
	        background: #E3F2FD;
	        .icon-box {
	          position: relative;
	          margin-right: 30rpx;
	          .weather-icon {
	            width: 100rpx;
	            height: 100rpx;
	          }
	          .temp {
	            position: absolute;
	            bottom: -10rpx;
	            right: -15rpx;
	            background: #2196F3;
	            color: white;
	            padding: 5rpx 15rpx;
	            border-radius: 20rpx;
	            font-size: 24rpx;
	          }
	        }
	        .advice {
	          .main-advice {
	            font-size: 32rpx;
	            font-weight: bold;
	            color: #1565C0;
	          }
	          .detail {
	            font-size: 26rpx;
	            color: #2196F3;
	            margin-top: 10rpx;
	          }
	        }
	      }
	
	      &.safety {
	        background: #E8F5E9;
	        .content {
	          margin-left: 25rpx;
	          .tip-title {
	            font-size: 28rpx;
	            color: #2E7D32;
	            font-weight: bold;
	          }
	          .tips {
	            margin-top: 15rpx;
	            font-size: 24rpx;
	            color: #4CAF50;
	            line-height: 1.6;
	            display: grid;
	            grid-template-columns: repeat(2, 1fr);
	            gap: 15rpx;
	          }
	        }
	      }
	
	      &.traffic {
	        background: #FFF3E0;
	        .content {
	          margin-left: 25rpx;
	          .traffic-title {
	            font-size: 28rpx;
	            color: #EF6C00;
	            font-weight: bold;
	          }
	          .road-condition {
	            margin-top: 15rpx;
	            font-size: 24rpx;
	            color: #FF9800;
	            line-height: 1.4;
	          }
	        }
	      }
	    }
	  }
	}
	.inspiration-quote {
	  margin-top: 30rpx;
	  padding: 25rpx;
	  background: #F0FFF4;
	  border-radius: 16rpx;
	  display: flex;
	  align-items: center;
	  gap: 20rpx;
	  animation: fadeIn 0.5s ease;
	  box-shadow: 0 2rpx 8rpx rgba(0,128,0,0.1);
	
	  .quote-text {
	    font-size: 28rpx;
	    color: #2E7D32;
	    line-height: 1.6;
	    flex: 1;
	    font-weight: 500;
	    font-family: system-ui;
	  }
	}
	
	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(10px); }
	  to { opacity: 1; transform: translateY(0); }
	}
	status-row {
	  display: flex;
	  justify-content: space-between;
	  padding: 20rpx 32rpx;
	}
	
	.weather-info {
	  display: flex;
	  align-items: center;
	  gap: 8rpx;
	  .location {
	    font-size: 28rpx;
	    color: #666;
	  }
	  .temperature {
	    font-size: 36rpx;
	    color: #333;
	    margin: 0 12rpx;
	  }
	}
	
	.mood-indicator {
	  flex: 0 0 48%;
	  background: #FFF;
	  border-radius: 16rpx;
	  padding: 16rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	  
	  .mood-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 12rpx;
	    
	    .emoji {
	      font-size: 36rpx;
	      margin-right: 8rpx;
	    }
	    
	    .title {
	      font-size: 26rpx;
	      color: #666;
	      margin-right: auto;
	    }
	  }
	
	  progress {
	    width: 100%;
	  }
	
	  .mood-detail {
	    margin-top: 16rpx;
	    padding-top: 12rpx;
	    border-top: 1rpx solid #eee;
	    
	    .detail-item {
	      display: flex;
	      align-items: center;
	      gap: 8rpx;
	      font-size: 24rpx;
	      color: #666;
	      margin: 8rpx 0;
	    }
	  }
	}
	.checkin-module {
	  background: #fff;
	  border-radius: 24rpx;
	  margin: 30rpx;
	  padding: 30rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	  
	  .checkin-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 30rpx;
	    
	    .icon {
	      width: 48rpx;
	      height: 48rpx;
	      margin-right: 15rpx;
	    }
	    
	    .title {
	      font-size: 36rpx;
	      font-weight: bold;
	      margin-right: 20rpx;
	    }
	    
	    .subtitle {
	      font-size: 26rpx;
	      color: #666;
	    }
	  }
	
	  .checkin-body {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	
	    .stats {
	      flex: 1;
	      display: flex;
	      gap: 40rpx;
	
	      .stat-item {
	        .number {
	          display: block;
	          font-size: 42rpx;
	          font-weight: bold;
	          color: $brand-theme-color;
	        }
	        
	        .label {
	          font-size: 26rpx;
	          color: #999;
	        }
	      }
	    }
	
	    .checkin-btn {
	      background: $brand-theme-color;
	      color: #fff;
	      padding: 20rpx 40rpx;
	      border-radius: 50rpx;
	      font-size: 32rpx;
	      transition: all 0.3s;
	      
	      &.checked {
	        background: #e0e0e0;
	        color: #666;
	      }
	    }
	  }
	}
		@font-face {
		  font-family: "阿里妈妈刀隶体 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/zXcAffo5T2lM.woff2") format("woff2"),
		  url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/xQDuP26z4bMd.woff") format("woff");
		  font-display: swap;
		}
	.daily{
		width: 100%;
		height: 641rpx;
		
		.title{
			margin: 40rpx;
		}
		.body{
			//background: #999;
			margin: 0 auto;
			width: 80%;
			height: 500rpx;
			background: rgb(250, 250, 251);
			padding: 20rpx;
			.text{
				font-size: 35rpx;
				padding-bottom: 10rpx;
				//border:1px solid #999 ;
				font-family:"阿里妈妈刀隶体 Regular" ;
				margin-bottom: 50rpx;
				//border-radius: 20rpx;
			}
		}
		
		
	}
	.main-container{
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				box-sizing: border-box;
				width: 750rpx;
				height: 340rpx;
				&-item{
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.notice{
			width: 690rpx;
			height: 80rpx;
			background-color: #f9f9f9;
			margin: 0 auto;
			border-radius: 80rpx;
			display: flex;
			line-height: 80rpx;
			.left{
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.text{
					color:$brand-theme-color;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.center{
				flex: 1;
				swiper{
					height: 100%;
					&-item{
						height: 100%;
						font-size: 30rpx;
						color: #666;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.right{
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			image{
				width: 50rpx;
				height: 50rpx;
			} 
		}
	}
	.head{
		height: 350rpx;
		//background: green;
	}
	
	
	
	.homeHead{
		background:	
		radial-gradient(50% 200px at left top, #D5F8FC, transparent),
		radial-gradient(50% 200px at right top, #D3CBFC, transparent);
		
		.titleBar{
			display: flex;
			align-items: center;
			padding-left:50rpx;
		}
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 15vh;
			.time{
				display: flex;
				align-items: center;
				padding-left:50rpx;
				.left{
					font-size: 110rpx;
					font-weight: bolder;
				}
				.right{	
					padding-left:15rpx;
					.year{
						font-size: 30rpx;
					}
					.week{
						font-size: 40rpx;
						font-weight: bolder;
					}
				}
			}
			.pic{
				height: 100%;
				padding-right: 20rpx;
				display: flex;
				margin-top: 250rpx;
				font-size: 28rpx;
					
				.city{
					margin-right: -10rpx;
					
				}
				
				view{
					margin-left: 25rpx;
				}
				image{
					margin-top: -10rpx;
					margin-left: 25rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

</style>
